<template>
  <div>
    <nav-header></nav-header>
    <div class="home">
      <!-- 头部导航开始 -->

      <!-- 轮播图开始 -->
      <div class="swiper">
        <van-swipe
          class="my-swipe"
          style="height: 150px"
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item
            v-for="(item, index) in result"
            v-if="index >= 4 ? true : false"
            @click="turnother(item.goodsid)"
          >
            <img :src="item.goodscover" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 商品展示开始 -->
      <div class="showgoods">
        <div class="singlegoods">
          <ul>
            <li v-for="(item, index) in result" @click="setgoodid(item.goodsid)">
              <div class="single-left">
                <img :src="item.goodscover" alt="" />
              </div>
              <div class="single-right">
                <h3>{{ item.goodsname }}</h3>
                <p>{{ item.description }}</p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 底部导航栏 -->
    <pagebottom></pagebottom>
  </div>
</template>
<style lang="scss" scoped>
@import "../static/comman.css";
.showgoods {
  // margin: 10px 0px;
  padding: 10px;
  .singlegoods {
    width: 355px;
    ul {
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .single-left {
          img {
            width: 170px;
            height: 170px;
          }
        }
        .single-right {
          display: flex;
          flex-direction: column;
          justify-content: left;
          text-align: left;
          h3 {
            font-size: 16px;
            color: #777;
          }
          p {
            margin-top: 15px;
            width: 130px;
            color: #777;
            font-size: 13px;
            // white-space: inherit;
            // text-overflow: ellipsis;
            // overflow: hidden;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
}

.home {
  box-sizing: border-box;
  width: 375px;
  margin-top: 30px;
}
.home-header {
  box-sizing: border-box;
  width: 355px;
  margin: 5px auto;
  display: flex;
  justify-content: space-between;
  .home-left {
    // width: 60px;
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: left;
    align-items: center;
    img {
      height: 100%;
      width: 70px;
    }
    span {
      width: 100px;
      display: block;
      position: absolute;
      font-size: 3px;
      font-weight: 900;
      background-color: #fff;
      color: #777;

      // margin-left: px;
      margin-top: 40px;
      // margin-right: -140px;
    }
  }
  .home-right {
    display: flex;
    justify-content: space-between;
    width: 80px;
    // flex-grow: 1;
    box-sizing: border-box;
    // margin-right: -165px;
    margin-top: 20px;
    .child {
      width: 40px;
      height: 40px;
      background: #f2f3f5;
      border-radius: 4px;
    }
    span {
      font-size: 14px;
      color: #777;
    }
    // width: 150px;
    //  background-color: red;
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  img {
    width: 100%;
    height: 150px;
    // background-size: cover;
  }
}
</style>

<script>
import axios from "axios";
// import { defineComponent } from '@vue/composition-api'
import { mapState } from "vuex";
import vue from "vue";
import navHeader from "../components/herder.vue";
import pagebottom from "../components/pagebottom";
import '../http/request'
import { goodsAllFunc } from '../http/goods';
// import Pagebottom from '../components/pagebottom';
export default {
  name: "home",
  components: {
    navHeader,
    pagebottom,
  },
  data() {
    return {
      userturn: "",
      result: [],
  
    };
  },
 
  computed: {
    ...mapState(["user"]),
    ...mapState(["active"]),
  },
  methods: {
    turnother(goodsid){
            this.$router.push("productdetail");
      localStorage.setItem("goodsid", goodsid);
    },
    setgoodid(value) {
      console.log(value);
      this.$router.push("productdetail");
      localStorage.setItem("goodsid", value);
    },
  },
  created() {
    this.$store.commit('setactive',0)
  
    // console.log("home的watch观测到activ发生改变", this.activecore, this.active);
    // axios({
    //   method: "get",
    //   url: "http://192.168.35.7:3005/goods",
    // }).then((response) => {
    //   console.log(response.data.result);
    //   this.result =[...response.data.result];
    //   console.log("数据结果展示",this.result);
    // });
    goodsAllFunc('/goods').then(data=>{
      this.result=data.result;
    })
  },
};
</script>
